<template>
  <div>
    <van-pull-refresh
      v-model="loading"
      success-text="每一次刷新都在探寻美食"
      @refresh="onRefresh"
    >
      <div>
        <div class="nav-wrapper">
          <!-- 顶部导航栏 -->
          <div :class="{ 'sticky-top': isSticky }">
            <div>
              <span
                class="nav-text1"
                @click="
                  setActive(1);
                  toAllOrder();
                "
                :class="{ active: activeIndex === 1 }"
                >订单</span
              ><van-divider vertical :style="{ borderColor: '#23272E' }" />
              <span
                class="nav-text2"
                @click="
                  setActive(2);
                  toBoughtStore();
                "
                :class="{ active: activeIndex === 2 }"
                >买过的店</span
              >
              <img class="nav-img1" src="../../assets/icon/xiaoxi.svg" /><img
                class="nav-img2"
                src="../../assets/icon/sousuo.svg"
              />
            </div>
            <OrderListNav v-if="showButton === 1"></OrderListNav>
            <BoughtStoreNav v-if="showButton === 2"></BoughtStoreNav>
          </div>
        </div>
        <router-view></router-view>
      </div>
    </van-pull-refresh>
    <footer-view> </footer-view>
  </div>
</template>



<script setup>
import { ref, onBeforeUnmount, onMounted } from "vue";
import { useRouter } from "vue-router";
import OrderListNav from "./orderList/OrderListNav.vue";
import BoughtStoreNav from "./orderList/BoughtStoreNav.vue";
import FooterView from "../footer/FooterView.vue";
//刷新定义
const loading = ref(false);
const onRefresh = () => {
  setTimeout(() => {
    loading.value = false;
  }, 1000);
};

const showButton = ref(1); //动态显示button
const activeIndex = ref(1); // 默认第一个文字为激活状态
const setActive = (index) => {
  activeIndex.value = index;
  showButton.value = index;
};
const isSticky = ref(false);
const router = useRouter();

// 监听滚动事件
function handleScroll() {
  const threshold = 0; // 吸顶的阈值，可以根据需要调整
  if (window.scrollY > threshold) {
    isSticky.value = true;
  } else {
    isSticky.value = false;
  }
}
// 添加滚动事件监听
onMounted(() => {
  window.addEventListener("scroll", handleScroll);
});
// 组件卸载时移除事件监听
onBeforeUnmount(() => {
  window.removeEventListener("scroll", handleScroll);
});
/* function toOrderChildren() {
    router.push("/orderList/orderChildren")
} */
function toBoughtStore() {
  router.push("/orderList/boughtStore");
}
function toAllOrder() {
  router.push("/orderList/allOrder");
}
</script>




<style lang="scss" scoped>
.sticky-top {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  /* 确保它在页面其他内容的上方 */
  background-color: #fae45b;
}

.my-button {
  width: 100vw;
  position: fixed;
  background-color: #fae45b;

  ::v-deep(.van-button) {
    width: 110px;
    height: 35px;
    margin: 20px 0px 10px 11px;
    background-color: #fcf49f;
    border-radius: 30px;
    border: 0px;
    /* font-weight: bold; */
    /* 加粗 */

    /* 变黑 */
  }
}

.nav-wrapper {
  /*     height: 300px; */
  width: 100vw;
  height: 18vh;
  background-color: #fae45b;

  .nav-text1 {
    /* 将span转换为内联块级元素 */
    display: inline-block;
    margin-top: 30px;
    margin-left: 23px;
    margin-right: 3px;
  }

  .nav-text2 {
    /* 将span转换为内联块级元素 */
    display: inline-block;
    margin-top: 30px;
    margin-left: 3px;
    padding-right: 10px;
  }

  .active {
    font-weight: bold;
    /* 加粗 */
    color: black;
    /* 变黑 */
    font-size: 20px;
  }

  .nav-img1 {
    width: 25px;
    float: right;
    /* 元素固定在右边 */
    margin-left: 30px;
    margin-top: 30px;
    margin-right: 20px;
    object-fit: cover;
  }

  .nav-img2 {
    width: 25px;
    float: right;
    /* 元素固定在右边 */
    margin-top: 32px;
    object-fit: cover;
  }
}
</style>